<template>
  <el-container class="setting-center_mall-shop-setting_shop-info-setting">
    <el-button class="fixedRight" type="primary" icon="el-icon-sort" size="small" @click="$showHide()" />
    <el-main>
      <div class="card-list">
        <el-card shadow="never" class="selectCard searchColumn">
          <el-form label-position="right" label-width="6rem">
            <el-row :gutter="40">
              <el-col :span="8">
                <el-form-item label="楼栋">
                  <el-select v-model="params.name" placeholder="楼栋">
                    <el-option label="全部" value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="楼层">
                  <el-select v-model="params.name" placeholder="楼层">
                    <el-option label="全部" value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="经营模式">
                  <el-select v-model="params.name" placeholder="经营模式">
                    <el-option label="全部" value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="业态">
                  <el-select v-model="params.name" placeholder="业态">
                    <el-option label="全部" value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商户名称">
                  <el-input v-model="params.name" />
                </el-form-item>
              </el-col>
            </el-row>
            <SearchButton
              :default-params="params"
              @refreshParams="refreshParams"
              @getList="getList"
            />
          </el-form>
        </el-card>
        <el-card shadow="never" class="tableCard">
          <vxe-toolbar
            :custom="{ icon: 'el-icon-s-operation' }"
            :refresh="{ query: getList }"
            print
          >
            <template v-slot:buttons>
              <el-button
                type="warning"
                icon="el-icon-connection"
              >批量初始化</el-button>
            </template>
            <!-- <template v-slot:tools>1</template> -->
          </vxe-toolbar>
          <vxe-table
            ref="xTable"
            border
            resizable
            row-id="id"
            highlight-hover-row
            :auto-resize="true"
            :data="tableData"
            width
            max-height="500"
            :print-config="{}"
          >
            <vxe-table-column field="seq" min-width="60" title=" " />
            <vxe-table-column field="name" align="center" title="楼栋" />
            <vxe-table-column field="name" align="center" title="楼层" />
            <vxe-table-column field="name" align="center" title="商户名称" />
            <vxe-table-column field="name" align="center" title="品牌logo" />
            <vxe-table-column field="name" align="center" title="品牌名称" />
            <vxe-table-column field="name" align="center" title="铺位号" />
            <vxe-table-column field="name" align="center" title="经营模式" />
            <vxe-table-column field="name" align="center" title="业态" />
            <vxe-table-column field="name" align="center" title="状态" />
            <vxe-table-column
              title="操作"
              fixed="right"
              align="center"
              width="180"
              slots="default"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  icon="el-icon-chat-line-round"
                  @click="getList(scope.row.name)"
                >查看</el-button>
                <el-button
                  type="text"
                  size="mini"
                  icon="el-icon-chat-line-round"
                >编辑</el-button>
                <el-button
                  type="text"
                  size="mini"
                  icon="el-icon-chat-line-round"
                >撤铺</el-button>
              </template>
            </vxe-table-column>
          </vxe-table>
          <vxe-pager
            :current-page.sync="tableCurrentPage"
            :page-size.sync="pageSize"
            :total="total"
            :layouts="[
              'PrevJump',
              'PrevPage',
              'Number',
              'NextPage',
              'NextJump',
              'FullJump',
              'Total',
            ]"
            @page-change="getRentList()"
          />
        </el-card>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import SearchButton from '@/components/SearchButton'
export default {
  components: {
    SearchButton
  },
  data() {
    return {
      options: [],
      rules: {
        name: [{ required: true, message: '请填写详细地址', trigger: 'blur' }],
        city: [{ required: true, message: '请选择所在城市', trigger: 'blur' }]
      },
      title: '蜂网电子商务',
      params: {
        name: '0'
      },
      tableData: [
        {
          name: '111',
          id: 1
        }
      ],
      tableCurrentPage: 1,
      pageSize: 20,
      total: 0
    }
  },
  mounted() {},
  methods: {
    refreshParams(params) {
      this.params = params
    },
    getList() {}
  }
}
</script>

<style lang="scss">
.setting-center_mall-shop-setting_shop-info-setting {
  .card-list {
    width: 100%;
  }
}
</style>
